<script setup>
import { useResetForm } from '@/hooks/tool';
import { useWatch } from '@/hooks/useWatch';

const props = defineProps({
  status: { type: String, default: () => '新增' },
  riskInfo: { type: Object, default: () => null },
  cascaderList: { type: Array, default: () => [] },
  riskTypeList: { type: Array, default: () => [] },
});
const emit = defineEmits(['submit']);
const open = ref(false);
const queryForm = ref(null);
const selCascader = ref([]);
const cascaderProps = ref({
  emitPath: true,
  checkStrictly: true,
  label: 'name',
  value: 'id',
});
const queryParams = ref({
  riskLevel1: null, //一级风险id
  riskLevel2: null, //二级风险id
  riskLevel3: null, //三级
  riskType: null, //风险分类（字典risk_type）
  riskDescribe: null, //风险描述
  controlTarget: null, //控制目标
  controlMethod: null, //控制措施
  controlActivity: null, //控制活动
});

const handleChange = value => {
  if (value.length) {
    queryParams.value.riskLevel1 = value[0];
    queryParams.value.riskLevel2 = value?.[1] ?? null;
    queryParams.value.riskLevel3 = value?.[2] ?? null;
  } else {
    queryParams.value.riskLevel1 = null;
    queryParams.value.riskLevel2 = null;
    queryParams.value.riskLevel3 = null;
  }
};
const cancel = () => {
  useResetForm(queryForm);
  selCascader.value = [];
  open.value = false;
};
const submit = () => {
  emit('submit', queryParams.value);
  cancel();
};
useWatch(
  () => props.riskInfo,
  n => {
    nextTick(() => {
      queryParams.value = n;
      selCascader.value = n.riskLevel3
        ? [Number(n.riskLevel1), Number(n.riskLevel2), Number(n.riskLevel3)]
        : n.riskLevel2
        ? [Number(n.riskLevel1), Number(n.riskLevel2)]
        : n.riskLevel1
        ? [Number(n.riskLevel1)]
        : [];
    });
    // selCascader.value = Array.from([n.riskLevel1, n.riskLevel2, n.riskLevel3].filter(Boolean).map(Number));
  },
);
defineExpose({ open });
</script>

<template>
  <el-dialog :visible.sync="open" :before-close="cancel" append-to-body width="40%">
    <div slot="title" class="dialog-title">
      <span class="tit">风险信息{{ status }}</span>
    </div>
    <el-form :model="queryParams" ref="queryForm" label-width="120px">
      <el-form-item label="风险等级类型">
        <el-cascader
          ref="riskCascader"
          v-model="selCascader"
          :props="cascaderProps"
          :options="cascaderList"
          clearable
          placeholder="请选择风险等级类型"
          size="small"
          style="width: 360px"
          @change="handleChange"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="风险分类" prop="riskType">
        <el-select
          class="el-input_search"
          v-model="queryParams.riskType"
          placeholder="请选择风险分类"
          clearable
          size="small"
          style="width: 200px"
        >
          <el-option
            v-for="dict in riskTypeList"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="风险描述" prop="riskDescribe">
        <el-input
          type="textarea"
          :autosize="{ minRows: 1, maxRows: 4 }"
          placeholder="请输入风险描述内容"
          v-model="queryParams.riskDescribe"
        />
      </el-form-item>
      <el-form-item label="控制目标" prop="controlTarget">
        <el-input
          type="textarea"
          :autosize="{ minRows: 1, maxRows: 4 }"
          placeholder="请输入控制目标内容"
          v-model="queryParams.controlTarget"
        />
      </el-form-item>
      <el-form-item label="控制措施" prop="controlMethod">
        <el-input
          type="textarea"
          :autosize="{ minRows: 1, maxRows: 4 }"
          placeholder="请输入控制措施内容"
          v-model="queryParams.controlMethod"
        />
      </el-form-item>
      <el-form-item label="控制活动" prop="controlActivity">
        <el-input
          type="textarea"
          :autosize="{ minRows: 1, maxRows: 4 }"
          placeholder="请输入控制活动内容"
          v-model="queryParams.controlActivity"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" plain @click="cancel">关 闭</el-button>
      <el-button type="primary" size="small" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<style lang="scss">
.app-dark {
  .el-textarea__inner {
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid #262f48;
  }
  .el-textarea__inner:hover {
    border-color: #09a9de;
  }
  .el-upload-list__item:hover {
    background: unset;
  }
}
</style>
